<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
        <style>
            html,body,div,span{padding:0;border:0;margin:0;outline:0;box-sizing:border-box;}
            html,body{position:absolute;top:0;right:0;bottom:0;left:0;}
            .container{position:absolute;top:50%;left:50%;width:600px;height:600px;margin-top:-300px;margin-left:-300px;border:1px solid #ddd;}
            .header{position:absolute;top:0;right:0;left:0;height:50px;line-height:50px;border-bottom:1px solid #ddd;}
            .header span{display:inline-block;height:100%;width:33.333333%;text-align:center;font-weight:bold;font-size:18px;border-right:1px solid #9e4444;float:left;background-color:#b15858;cursor:pointer;transition:all .5s;}
            .header span:hover{background-color:#ce3535;color:#fff;}
            .header span.active{background-color:#ce3535;color:#fff;}
            .header span:last-child{border-right:0;}
            .bodyer{position:absolute;top:50px;right:0;bottom:0;left:0;}
            .bodyer div{position:absolute;top:0;right:0;bottom:0;left:0;display:none;line-height:550px;text-align:center;font-size:32px;color:#fff;font-weight:bold;}
            .bodyer div:nth-child(1){background-color:#0a8;}
            .bodyer div:nth-child(2){background-color:#f60;}
            .bodyer div:nth-child(3){background-color:#44829e;}
            .bodyer div.active{display:block;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <span class="active">TAB-1</span>
                <span>TAB-2</span>
                <span>TAB-3</span>
            </div>
            <div class="bodyer">
                <div class="active">内容-1</div>
                <div>内容-2</div>
                <div>内容-3</div>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded',function(){
                Array.prototype.slice.call(document.getElementsByClassName('header')[0].getElementsByTagName('span')).forEach(function(v,i){
                    v.index = i;
                });
                Array.prototype.slice.call(document.getElementsByClassName('bodyer')[0].getElementsByTagName('div')).forEach(function(v,i){
                    v.index = i;
                });
                document.getElementsByClassName('header')[0].addEventListener('click',function(e){
                    Array.prototype.slice.call(document.getElementsByClassName('header')[0].getElementsByTagName('span')).forEach(function(v,i){
                        v.classList.remove('active');
                    });
                    e.target.className = 'active';
                    Array.prototype.slice.call(document.getElementsByClassName('bodyer')[0].getElementsByTagName('div')).forEach(function(v,i){
                        if(v.index === e.target.index){
                            v.className = 'active';
                        }else{
                            v.classList.remove('active');
                        }
                    });
                });
            });
        </script>
    </body>
</html>